<template>
  <el-dialog
    :title="isEdit ? '编辑订单' : '新增订单'"
    :model-value="visible"
    @update:model-value="handleClose"
    width="500px"
    destroy-on-close
  >
    <el-form
      ref="formRef"
      :model="formData"
      :rules="rules"
      label-width="100px"
      status-icon
    >
      <el-form-item label="商品ID" prop="goodId">
        <el-input v-model.number="formData.goodId" placeholder="请输入商品ID" />
      </el-form-item>
      
      <el-form-item label="商品数量" prop="amount">
        <el-input-number v-model="formData.amount" :min="1" placeholder="请输入数量" style="width: 100%" />
      </el-form-item>
      
      <el-form-item label="订单总价" prop="totalPrice">
        <el-input-number 
          v-model="formData.totalPrice" 
          :precision="2" 
          :step="0.1" 
          :min="0"
          placeholder="请输入订单总价" 
          style="width: 100%" 
        />
      </el-form-item>
      
      <el-form-item label="支付方式" prop="paymentMethod">
        <el-select v-model="formData.paymentMethod" placeholder="请选择支付方式" style="width: 100%">
          <el-option label="支付宝" value="支付宝" />
          <el-option label="微信" value="微信" />
          <el-option label="货到付款" value="货到付款" />
        </el-select>
      </el-form-item>
      
      <el-form-item label="订单状态" prop="orderStatus">
        <el-select v-model="formData.orderStatus" placeholder="请选择订单状态" style="width: 100%">
          <el-option label="待付款" value="待付款" />
          <el-option label="待发货" value="待发货" />
          <el-option label="配送中" value="配送中" />
          <el-option label="已完成" value="已完成" />
          <el-option label="已取消" value="已取消" />
        </el-select>
      </el-form-item>
    </el-form>
    
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" :loading="loading" @click="handleSubmit">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, watch, computed } from 'vue'
import { ElMessage } from 'element-plus'

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  isEdit: {
    type: Boolean,
    default: false
  },
  orderData: {
    type: Object,
    default: () => ({})
  },
  loading: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['update:visible', 'success'])

const formRef = ref(null)

// 默认表单数据
const defaultFormData = {
  goodId: null,
  amount: 1,
  totalPrice: 0,
  paymentMethod: '支付宝',
  orderStatus: '待付款'
}

const formData = reactive({ ...defaultFormData })

// 表单验证规则
const rules = {
  goodId: [
    { required: true, message: '请输入商品ID', trigger: 'blur' },
    { type: 'number', message: '商品ID必须为数字', trigger: 'blur' }
  ],
  amount: [
    { required: true, message: '请输入商品数量', trigger: 'blur' }
  ],
  totalPrice: [
    { required: true, message: '请输入订单总价', trigger: 'blur' }
  ],
  paymentMethod: [
    { required: true, message: '请选择支付方式', trigger: 'change' }
  ],
  orderStatus: [
    { required: true, message: '请选择订单状态', trigger: 'change' }
  ]
}

// 监听弹窗显示状态和数据变化
watch(
  () => props.visible,
  (val) => {
    if (val) {
      // 重置表单
      if (props.isEdit && props.orderData) {
        Object.assign(formData, props.orderData)
      } else {
        Object.assign(formData, defaultFormData)
      }
      // 清除之前的验证状态
      if (formRef.value) {
        formRef.value.clearValidate()
      }
    }
  }
)

// 监听 orderData 变化 (处理编辑模式下数据异步加载的情况)
watch(
  () => props.orderData,
  (val) => {
    if (props.visible && props.isEdit && val) {
      Object.assign(formData, val)
    }
  },
  { deep: true }
)

const handleClose = () => {
  emit('update:visible', false)
}

const handleSubmit = async () => {
  if (!formRef.value) return
  
  await formRef.value.validate((valid) => {
    if (valid) {
      emit('success', { ...formData })
    }
  })
}
</script>

<style scoped>
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
</style>

